<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Compute</title>
    </head>

    <body>
        <div id="app">
            <h1>地球人的礼物清单</h1>
            <ul>
                <li v-for="(item, index) in list" :key="item.id">
                    <td>{{ item.name }}</td>
                    <td>{{ item.num }}</td>
                </li>
            </ul>
            <p>礼物总数: {{ total }}</p>
        </div>

        <script src="./Vue2/vue.js"></script>

        <script>
            const app = new Vue({
                el: '#app',
                data: {
                    list: [
                        {id: 1, name: '篮球', num: 1},
                        {id: 2, name: '足球', num: 2},
                        {id: 3, name: '排球', num: 3},
                    ]
                },
                methods: {

                },
                computed: {
                    total() {
                        // let total = 0;
                        // for (i = 0; i < this.list.length; i++) {
                        //     total += this.list[i].num
                        // }
                        // return total
                        return this.list.reduce((total, item) => total + item.num, 0)
                    }
                }
            })
        </script>
    </body>
</html>